<template>
    <div class="swiper-container" ref="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="val in banner" :key="val">
                <img :src="val" alt="">
            </div>
        </div>
        <div class="swiper-pagination" ref="pagination"></div>
    </div>
</template>

<script>
import Swiper,{ Autoplay, Pagination} from 'swiper'
import 'swiper/swiper-bundle.css'
Swiper.use([Autoplay,Pagination])

export default {
    props : {
        banner : Array
    },
    watch : {
        banner : {
            handler(val){
                if(val.length > 0){
                    this.$nextTick(() => {
                        new Swiper(this.$refs.swiper,{
                            loop : true,
                            autoplay : {
                                delay : 1000
                            },
                            pagination :{
                                el : this.$refs.pagination
                            },
                            disableOnInteraction : false
                        })
                    })
                }
            },
            immediate: true
        }
    },
}
</script>

<style lang="scss" scoped>

</style>